<template>
  <div id="app">
    <!-- <router-view /> -->

    <div>
      <h2>OKX Connect Vue3 Demo</h2>
      <div>
        <button @click="connectWallet">连接钱包</button>
        <button @click="disconnectWallet">断开钱包</button>
      </div>

      <p>已连接地址：{{ connectedAddress || '未连接' }}</p>

      <div>
        <button @click="sendUSDT" :disabled="!connectedAddress">发送 1 USDT (TRC20)</button>
      </div>

      <div id="okx-wallet-button"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { provide, ref, onMounted } from 'vue'
/*   */
import TronWeb from 'tronweb'
// import { OKXUniversalConnectUI } from '@okxconnect/ui'
// import { OKXTronProvider } from '@okxconnect/universal-provider'

// console.log(OKXUniversalConnectUI.init, 'OKXUniversalConnectUI');


// import { useTronWallet } from './composables/useTronWallet'

// const { walletState } = useTronWallet()

// 全局状态管理
// const walletState = {
//   balance: 6.545549,
//   currency: 'USDT',
//   networkFee: { amount: 27.8599, currency: 'TRX', usdValue: 7.61 },
//   fromAddress: 'THnAK5rwDmB9SgzUGxKTEDw2jorHLAN4Qg',
//   fromLabel: '钱包 A - 账户 01'
// }

// provide('walletState', walletState)


// 导入 OKX SDK 相关包
import { OKXUniversalProvider } from '@okxconnect/universal-provider'
import { OKXUniversalConnectUI, THEME } from '@okxconnect/ui'

// 全局变量
const okxUniversalProvider = ref(null)
const okxUniversalConnectUI = ref(null)
const connectedAddress = ref('')

// 初始化和挂载UI按钮容器
onMounted(async () => {
  // const TronWebModule = await import('tronweb')
  // TronWeb = TronWebModule.default

  // tronWebInstance = new TronWeb({
  //   fullHost: 'https://api.trongrid.io'
  // })

  try {
    // 1. 初始化 Provider (核心API)
    okxUniversalProvider.value = await OKXUniversalProvider.init({
      dappMetaData: {
        name: "My DApp",
        icon: "https://example.com/logo180.png"
      },
    })

    // 2. 初始化 UI 组件，并传入Provider实例
    okxUniversalConnectUI.value = await OKXUniversalConnectUI.init(
      okxUniversalProvider.value,
      {
        returnStrategy: 'tg://resolve', // Telegram深度链接跳转，按需修改
        modals: 'all',
        tmaReturnUrl: 'back'
      },
      {
        theme: THEME.LIGHT
      },
      'zh_CN'
    )

    // 监听钱包状态变化
    okxUniversalConnectUI.value.onStatusChange(
      (walletInfo) => {
        if (walletInfo && walletInfo.accounts && walletInfo.accounts.length > 0) {
          connectedAddress.value = walletInfo.accounts[0]
          console.log('钱包已连接，地址:', connectedAddress.value)
        } else {
          connectedAddress.value = ''
          console.log('钱包未连接')
        }
      },
      (err) => {
        console.error('连接错误:', err)
      }
    )
  } catch (error) {
    console.error('初始化失败:', error)
  }
})

// 连接钱包（通过 Provider 的 connect 方法触发）
async function connectWallet() {
  if (!okxUniversalProvider.value) {
    alert('钱包 Provider 未初始化')
    return
  }
  try {
    const session = await okxUniversalProvider.value.connect({
      namespaces: {
        tron: {
          chains: ['tron:mainnet']
        }
      },
      sessionConfig: {
        redirect: 'tg://resolve' // 可选
      }
    })
    console.log('连接成功，session:', session)
  } catch (err) {
    console.log(err, 'eer');

    // if (err instanceof OKXConnectError) {
    //   switch (err.code) {
    //     case OKX_CONNECT_ERROR_CODES.USER_REJECTS_ERROR:
    //       alert('用户拒绝连接')
    //       break
    //     case OKX_CONNECT_ERROR_CODES.NOT_CONNECTED_ERROR:
    //       alert('未连接钱包')
    //       break
    //     default:
    //       alert('连接错误:' + err.message)
    //       break
    //   }
    // } else {
    //   alert('未知错误')
    // }
  }
}

// 断开连接
async function disconnectWallet() {
  if (!okxUniversalProvider.value) return
  await okxUniversalProvider.value.disconnect()
  connectedAddress.value = ''
}

// 发起 TRON 网络转账1 USDT示例
// 注意：TRON上USDT是TRC20合约，需要调用合约转账，不能直接转TRX
// import TronWeb from 'tronweb'
// let tronWebInstance = new TronWeb({
//   fullHost: 'https://api.trongrid.io'
// })
// let TronWeb
// let tronWebInstance


async function sendUSDT() {
  if (!okxUniversalProvider.value) {
    alert('钱包未连接')
    return
  }
  try {
    const okxTronProvider = new (await import('@okxconnect/universal-provider')).OKXTronProvider(okxUniversalProvider.value)

    // 获取当前钱包地址
    const fromAddress = okxTronProvider.getAccount('tron:mainnet').address

    // USDT TRC20合约地址
    const contractAddress = 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t'

    // 接收地址
    const toAddress = 'TFgx9wEKyATa4BfaniE6VcTBonax1ro26w'

    // 构造合约转账交易
    const contract = await tronWebInstance.contract().at(contractAddress)
    // 转账1 USDT，USDT有6位小数，1 USDT = 1_000_000
    const tx = await contract.methods.transfer(toAddress, 1_000_000).send({
      feeLimit: 1_000_000_000,
      callValue: 0,
      shouldPollResponse: false,
      from: fromAddress
    })

    // 使用 OKX SDK 签名并发送交易
    const transactionBuilder = await tronWebInstance.transactionBuilder.triggerSmartContract(
      contractAddress,
      'transfer(address,uint256)',
      {},
      [{ type: 'address', value: toAddress }, { type: 'uint256', value: 1_000_000 }],
      fromAddress
    )

    const signedTx = await okxTronProvider.signAndSendTransaction(transactionBuilder.transaction, 'tron:mainnet')

    alert('交易成功，hash:' + signedTx)
    console.log('交易hash:', signedTx)
  } catch (error) {
    alert('交易失败:' + error.message)
    console.error(error)
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

#app {
  min-height: 100vh;
  overflow-x: hidden;
}
</style>